import './card.scss'
export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    if (value) {
      let isIn = true
      const documentSpan = document.createElement('span')
      documentSpan.className = ' card_span'
      el.appendChild(documentSpan)
      // 监听鼠标进去的事件+进去的方法
      el.addEventListener('mouseenter', (e) => {
        if (isIn) { // 如果进去的门时打开的，就可以执行这个函数
          // 获取进入的鼠标位置
          // 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
          const inx = e.clientX - e.target.offsetLeft
          const iny = e.clientY - e.target.offsetTop
          // 创建一个span元素，并且给它对应的出生坐标
          const documentSpan = document.querySelector('.card_span')
          documentSpan.style.background = value
          documentSpan.style.left = inx + 'px'
          documentSpan.style.top = iny + 'px'
          documentSpan.className = 'in card_span'// 添加进入的动画
          isIn = false // 关闭进来的门（不能使用进入的方法）
        }
      })

      // 监听鼠标出来的事件+出来的方法
      el.addEventListener('mouseleave', (e) => {
        if (!isIn) {
          // 获取出去的鼠标位置
          // 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
          const inx = e.clientX - e.target.offsetLeft
          const iny = e.clientY - e.target.offsetTop
          //
          const documentSpan = document.querySelector('.card_span')
          documentSpan.style.left = inx + 'px'
          documentSpan.style.top = iny + 'px'
          documentSpan.className = 'out card_span'
          // 当动画结束后再删除元素
          isIn = true
          // setTimeout(() => {
          //   // el.removeChild(documentSpan)// 删除元素
          //   isIn = true// 打开进来的大门
          // }, 500)
        }
      })
    }
  }
}

